<template>
    <div class="personal-container">
        <!-- 顶部个人信息卡片 -->
        <div class="profile-card">
            <div class="profile-header">
                <div class="avatar-section">
                    <div class="avatar">{{ userInfo.avatar || '👤' }}</div>
                    <div class="user-info">
                        <h2>{{ userInfo.name || '用户名' }}</h2>
                        <p>ID: {{ userInfo.id || '12345678' }}</p>
                    </div>
                </div>
                <div class="edit-button" @click="showEditDialog = true">
                    <span>编辑资料</span>
                </div>
            </div>
            <div class="profile-stats">
                <!-- 可以根据需要添加统计项 -->
            </div>
        </div>

        <!-- 功能列表 -->
        <div class="function-list">
            <!-- 功能组 1 -->
            <div class="function-group">
                <!-- 设备管理 -->
                <div class="function-item" @click="toEquipmentManagement">
                    <div class="icon-wrapper">
                        <span class="icon">📱</span>
                    </div>
                    <div class="function-content">
                        <span class="title">设备管理</span>
                        <span class="description">绑定和管理您的设备</span>
                    </div>
                    <span class="arrow">›</span>
                </div>
                <!-- 报警历史 -->
                <div class="function-item" @click="toAlarmHistory">
                    <div class="icon-wrapper">
                        <span class="icon">🔔</span>
                    </div>
                    <div class="function-content">
                        <span class="title">报警历史</span>
                        <span class="description">查看历史报警记录</span>
                    </div>
                    <span class="arrow">›</span>
                </div>
                <!-- 联系医生 -->
                <div class="function-item" @click="toContactDoctor">
                    <div class="icon-wrapper">
                        <span class="icon">👨‍⚕️</span>
                    </div>
                    <div class="function-content">
                        <span class="title">联系医生</span>
                        <span class="description">在线咨询专业医生</span>
                    </div>
                    <span class="arrow">›</span>
                </div>
            </div>

            <!-- 功能组 2 -->
            <div class="function-group">
                <!-- 关于我们 -->
                <div class="function-item" @click="toAbout">
                    <div class="icon-wrapper">
                        <span class="icon">ℹ️</span> <!-- 更新图标为信息图标 -->
                    </div>
                    <div class="function-content">
                        <span class="title">关于我们</span>
                        <span class="description">了解更多信息</span>
                    </div>
                    <span class="arrow">›</span>
                </div>
                <!-- 联系客服 -->
                <div class="function-item" @click="toCustomerService">
                    <div class="icon-wrapper">
                        <span class="icon">📞</span>
                    </div>
                    <div class="function-content">
                        <span class="title">联系客服</span>
                        <span class="description">获取帮助支持</span>
                    </div>
                    <span class="arrow">›</span>
                </div>
            </div>
        </div>

        <!-- 退出登录按钮 -->
        <div class="logout-button" @click="handleLogout">
            退出登录
        </div>

        <!-- 编辑资料弹窗 -->
        <div v-if="showEditDialog" class="edit-dialog">
            <div class="dialog-content">
                <h3>编辑个人资料</h3>
                <!-- 头像输入 -->
                <div class="form-group">
                    <label>头像</label>
                    <input v-model="editForm.avatar" placeholder="请输入头像URL或选择文件">
                    <!-- 可以考虑添加文件上传功能 -->
                </div>
                <!-- 用户名输入 -->
                <div class="form-group">
                    <label>用户名</label>
                    <input v-model="editForm.name" placeholder="请输入用户名">
                </div>
                <!-- 弹窗按钮 -->
                <div class="dialog-buttons">
                    <button class="cancel-btn" @click="showEditDialog = false">取消</button>
                    <button class="confirm-btn" @click="saveProfile">保存</button>
                </div>
            </div>
        </div>

        <!-- 底部导航组件 -->
        <navigation :active-tab="activeTab" @tab-change="handleTabChange" />
    </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { useRouter } from "vue-router";
import Navigation from '@/components/Navigation.vue'; // 导入导航组件
import { getItem } from '@/components/Session.vue';

export default {
    components: { // 注册导航组件
        Navigation
    },
    setup() {
        // --- 响应式状态定义 ---
        const router = useRouter(); // 获取路由实例，用于页面跳转
        const showEditDialog = ref(false); // 控制编辑资料弹窗的显示状态，默认为隐藏
        const activeTab = ref('mine'); // 当前底部导航栏的活动标签，默认为 'mine'

        // 用户信息 (使用 reactive 创建响应式对象)
        const user = getItem('user');
        const userInfo = reactive({
            id: user.username, // 用户ID (示例)
            name: user.name, // 用户名 (示例)
            avatar: '👤' // 头像 (示例，可以是 URL 或 emoji)
            // TODO: 从后端或本地存储获取实际用户信息
        });

        // 用户统计数据 (当前未使用，预留)
        const userStats = reactive({
            healthDays: 28, // 健康打卡天数 (示例)
            monitorCount: 12, // 监测次数 (示例)
            familyCount: 5 // 绑定家人数量 (示例)
        });

        // 编辑资料表单数据 (使用 reactive 创建响应式对象)
        const editForm = reactive({
            avatar: '', // 编辑时输入的头像信息
            name: '' // 编辑时输入的用户名
        });

        // --- 导航函数 --- 

        // 跳转到设备管理页面
        const toEquipmentManagement = () => {
            router.push('/equipmentmanagement');
        };

        // 跳转到报警历史页面
        const toAlarmHistory = () => {
            router.push('/alarmhistory'); // 确保此路由已在 router/index.js 中定义
        };

        // 跳转到关于我们页面
        const toAbout = () => {
            router.push('/about'); // 确保此路由已定义
        };

        // 联系客服 (直接调用电话功能)
        const toCustomerService = () => {
            // 注意：这会尝试直接拨打电话，仅在移动设备上有效
            window.location.href = 'tel:10086'; // 将 10086 替换为实际客服电话
        };

        // 跳转到联系医生页面
        const toContactDoctor = () => {
            router.push('/contactdoctor'); // 确保此路由已在 router/index.js 中定义
        };

        // --- 功能函数 --- 

        // 保存编辑后的个人资料
        const saveProfile = () => {
            // 简单更新前端显示的 userInfo
            if (editForm.name.trim()) { // 检查输入是否非空
                userInfo.name = editForm.name.trim();
            }
            if (editForm.avatar.trim()) { // 检查输入是否非空
                userInfo.avatar = editForm.avatar.trim();
            }
            showEditDialog.value = false; // 关闭编辑弹窗
            
            // 清空编辑表单，以便下次打开是空的
            editForm.name = '';
            editForm.avatar = '';

            // TODO: 在这里添加实际的API调用，将更新后的 userInfo 发送到后端保存
            // 例如: axios.post('/api/user/updateProfile', { name: userInfo.name, avatar: userInfo.avatar });
            console.log('个人资料已更新 (前端模拟):', userInfo);
        };

        // 处理退出登录
        const handleLogout = () => {
            // TODO: 调用后端的退出登录接口 (如果需要)
            // 例如: axios.post('/api/auth/logout');
            
            // 清除本地存储的用户凭证 (例如 token)
            localStorage.removeItem('userToken'); // 假设 token 存储在 localStorage
            console.log('用户已退出登录，本地凭证已清除');

            // 跳转到登录页面
            router.push('/'); // 跳转到根路径 (通常是登录页)
        };

        // 处理底部导航栏的标签切换事件
        const handleTabChange = (newTab) => {
            console.log('导航标签切换到:', newTab);
            activeTab.value = newTab; // 更新当前活动标签的状态
            
            // 根据点击的标签进行页面跳转
            if (newTab === 'home') {
                router.push('/'); // 跳转到主页
            } else if (newTab === 'mine') {
                // 如果当前已经是 'mine' 页面，避免重复导航
                if (router.currentRoute.value.path !== '/personal') {
                    router.push('/personal');
                }
            }
            // TODO: 根据应用的实际需要，添加其他标签页的跳转逻辑
            // else if (newTab === 'someOtherTab') { router.push('/some-other-route'); }
        };

        // --- 返回值 --- 
        // 将需要在模板中使用的数据和方法暴露出去
        return {
            userInfo, // 用户信息对象
            userStats, // 用户统计数据对象
            showEditDialog, // 编辑弹窗显示状态
            editForm, // 编辑表单数据对象
            activeTab, // 底部导航活动标签
            handleTabChange, // 导航切换处理函数
            toEquipmentManagement, // 跳转到设备管理
            toAlarmHistory, // 跳转到报警历史
            toAbout, // 跳转到关于我们
            toCustomerService, // 联系客服
            toContactDoctor, // 添加新函数
            saveProfile, // 保存个人资料函数
            handleLogout // 退出登录函数
        };
    }
}
</script>

<style scoped>
.personal-container {
    min-height: 100vh;
    background-color: #F9FAFB;
    padding: 20px;
    font-family: 'Inter', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    padding-bottom: 80px;
    /* 为底部导航栏增加空间 */
}

.profile-card {
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    color: white;
    padding: 4vw;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* border: 1px solid #E5E7EB; */
    /* 移除或调整边框 */
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.avatar-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar {
    width: 60px;
    height: 60px;
    /* background: linear-gradient(135deg, #3B82F6, #8B5CF6); */
    /* 更换为与主题一致或更简洁的背景 */
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    /* 调整字体大小 */
    color: white;
    /* box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2); */
    /* 移除或调整阴影 */
}

.user-info h2 {
    margin: 0;
    font-size: 5vw;
    /* 略微增大字体 */
    font-weight: 600;
    color: white;
}

.user-info p {
    margin-top: 1.5vw;
    /* 增加间距 */
    font-size: 3.2vw;
    /* 略微增大字体 */
    color: rgba(255, 255, 255, 0.85);
    /* 调整透明度 */
    opacity: 0.85;
    /* 使用 opacity */
}

.edit-button {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    /* 半透明背景 */
    border-radius: 20px;
    font-size: 13px;
    /* 调整字体大小 */
    font-weight: 500;
    color: white;
    /* 文字颜色改为白色 */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* 添加细边框 */
}

.edit-button:hover {
    background: rgba(255, 255, 255, 0.3);
    /* 悬停时更亮 */
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.3); */
    /* 调整分割线颜色和透明度 */
    /* 当前内容为空，样式暂不生效 */
}

/* ... stat-item, stat-value, stat-label (如果添加内容) ... */

.function-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.function-group {
    background: white;
    border-radius: 12px;
    /* 减小圆角 */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* 调整阴影 */
    /* border: 1px solid #E5E7EB; */
    /* 移除边框 */
}

.function-item {
    display: flex;
    align-items: center;
    padding: 16px 16px;
    /* 调整内边距 */
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* 简化过渡 */
    position: relative;
}

.function-item:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
    /* 更细的分割线 */
}

.function-item:hover {
    background-color: #f9f9f9;
    /* 调整悬停背景色 */
}

.icon-wrapper {
    width: 38px;
    /* 调整大小 */
    height: 38px;
    /* 调整大小 */
    /* background: linear-gradient(135deg, #3B82F6, #8B5CF6); */
    /* 使用单色背景 */
    background-color: #eef2ff;
    /* 示例：淡蓝色背景 */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    /* 调整间距 */
    /* box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2); */
    /* 移除阴影 */
}

/* 为不同功能组的图标设置不同背景色（可选）*/
.function-group:nth-child(1) .icon-wrapper {
    background-color: #e0f2fe; /* Light Blue */
}
.function-group:nth-child(2) .icon-wrapper {
    background-color: #f0fdf4; /* Light Green */
}

.icon {
    font-size: 18px;
    /* 调整图标大小 */
    color: #3B82F6;
    /* 图标颜色与背景关联或使用固定色 */
}

.function-content {
    flex: 1;
}

.title {
    display: block;
    font-size: 15px;
    /* 调整字体大小 */
    color: #1F2937;
    margin-bottom: 2px;
    /* 减小间距 */
    font-weight: 500;
}

.description {
    font-size: 13px;
    /* 调整字体大小 */
    color: #6B7280;
}

.arrow {
    font-size: 18px;
    /* 调整箭头大小 */
    color: #cccccc;
    /* 箭头颜色调浅 */
    margin-left: 10px;
}

.logout-button {
    margin-top: 30px;
    padding: 14px;
    /* 调整内边距 */
    background: white;
    border-radius: 12px;
    /* 匹配 function-group 圆角 */
    text-align: center;
    color: #EF4444;
    font-weight: 500;
    font-size: 15px;
    /* 调整字体大小 */
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* 匹配 function-group 阴影 */
    /* border: 1px solid #E5E7EB; */
    /* 移除边框 */
    transition: background-color 0.2s ease, color 0.2s ease;
    /* 简化过渡 */
}

.logout-button:hover {
    background: #fee2e2;
    /* 调整悬停背景色 */
    color: #DC2626;
}

/* 编辑弹窗样式 */
.edit-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-content {
    background: white;
    padding: 25px;
    /* 增加内边距 */
    border-radius: 12px;
    /* 匹配其他圆角 */
    width: 85%;
    /* 调整宽度 */
    max-width: 350px;
    /* 调整最大宽度 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dialog-content h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    /* 增加间距 */
    color: #4B5563;
    font-size: 14px;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    /* 调整内边距 */
    border: 1px solid #d1d5db;
    /* 调整边框颜色 */
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    /* 确保 padding 不会撑大元素 */
}

.form-group input:focus {
    border-color: #3B82F6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    /* 添加 focus 效果 */
}

.dialog-buttons {
    display: flex;
    justify-content: space-between;
    /* 改为 space-between */
    gap: 10px;
    margin-top: 25px;
    /* 增加间距 */
}

.cancel-btn, .confirm-btn {
    flex: 1;
    /* 让按钮平分宽度 */
    padding: 10px 16px;
    /* 调整按钮内边距 */
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    /* 添加阴影过渡 */
}

.cancel-btn {
    background: #e5e7eb;
    /* 调整背景色 */
    color: #4b5563;
    border: none;
}

.confirm-btn {
    background: #3B82F6;
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    /* 添加阴影 */
}

.cancel-btn:hover {
    background: #d1d5db;
    /* 调整悬停背景色 */
}

.confirm-btn:hover {
    background: #2563EB;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    /* 悬停阴影加深 */
}
</style>